<template>
  <div class="page-container">
    <lan-header :config="headerConfig"></lan-header>
    <div class="factory-create-form">
      <lan-form
        :config="formConfig"
        :formData="formData"
        class="lan-form"
      ></lan-form>
      <div class="factory-add-map">
        <factory-map
          @amapData="getAMapData"
          ref="factoryMap"
        ></factory-map>
      </div>
    </div>
  </div>
</template>

<script>
import LanForm from '../../../components/lanForm';
import lanHeader from '../../../components/lanHeader';
import FactoryMap from '../factoryMap.vue';
import { Message } from 'element-ui';
import { parseError } from '../../../utils';
import { createFactoryApi } from '../../../api/factory';
import { validateForm } from './service';
import { queryAreaListApi } from '../../../api/area';

export default {
  name: 'AddFactory',
  components: {
    FactoryMap,
    LanForm,
    lanHeader
  },
  data() {
    return {
      remoteLoading: false,
      btnLoading: false,
      areaList: [],
      headerConfig: {
        title: '工厂列表',
        buttons: [
          {
            text: '保存',
            icon: 'save',
            type: 'primary',
            size: 'small',
            method: () => {
              this.create();
            }
          }
        ]
      },
      formData: {
        areaUuid: '',
        name: '',
        contactName: '',
        contactMobile: '',
        areaCode: 0,
        latitude: 0,
        longitude: 0,
        location: ''
      },
      formConfig: {
        inline: false,
        size: 'normal',
        hideLabel: false,
        formList: [
          {
            name: 'areaUuid',
            type: 'remoteSelect',
            label: '区域',
            options: () => this.areaList,
            optionValue: 'uuid',
            optionLabel: 'name',
            placeholder: '区域',
            tooltip: '区域是指用来管理工厂，一般按照地域来划分 (湖北区、浙江区)',
            width: 280,
            query: () => {
              this.remoteAreaSearch();
            }
          },

          {
            name: 'name',
            label: '工厂',
            type: 'input',
            placeholder: '请输入工厂名称',
            required: true,
            tooltip: '工厂是用来管理设备（武汉工厂、嘉兴工厂），也可以把工厂理解为设备分组',
            width: 280
          },
          {
            name: 'contactName',
            label: '联系姓名',
            type: 'input',
            placeholder: '请输入联系人姓名',
            required: true,
            tooltip: '工厂联系人姓名',
            width: 280
          },
          {
            name: 'contactMobile',
            label: '联系电话',
            type: 'input',
            placeholder: '请输入联系人电话',
            required: true,
            tooltip: '工厂联系人的手机号码',
            width: 280
          }
        ]
      }
    };
  },
  created() {
    this.remoteAreaSearch();
  },
  mounted() {
    this.$refs.factoryMap.judgeEditOrAdd();
  },
  methods: {
    // 创建新工厂函数
    create() {
      this.btnLoading = true;
      createFactoryApi(
        this.formData.areaUuid,
        this.formData.name,
        this.formData.contactName,
        this.formData.contactMobile,
        parseInt(this.formData.areaCode),
        this.formData.latitude,
        this.formData.longitude,
        this.formData.location
      )
        .then(res => {
          Message.success('成功创建工厂');
          this.$router.replace('/factory/list/');
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.btnLoading = false));
    },
    remoteAreaSearch(query) {
      this.remoteLoading = true;
      queryAreaListApi(query, 10)
        .then(areaList => (this.areaList = areaList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    getAMapData(amapData) {
      this.formData.areaCode = amapData.adcode;
      this.formData.longitude = amapData.longitude;
      this.formData.latitude = amapData.latitude;
      this.formData.location = amapData.location;
    }
  }
};
</script>

<style lang="scss" scoped>
.page-container {
  padding: 10px;
}
.factory-create-form {
  background-color: #fff;
  padding-top: 20px;
  width: auto;
  .lan-form {
    display: flex;
    width: 900px;
    flex-direction: row;
    flex-wrap: wrap;
    .el-form-item {
    }
  }
}
.factory-add-map {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
}
</style>
